import React ,{ Component } from 'react';
import { observer, inject } from 'mobx-react';
import { Route, withRouter, Switch} from 'react-router-dom';
import { asyncComponent } from 'react-async-component';
import GovernConstant from '../../../util/index'

const coms = {
  ContentPage: asyncComponent({
    resolve: () => import("../pages/contentPage")
  }),
  SubtasksPage: asyncComponent({
    resolve: () => import("../pages/subtasksPage")
  }),
  OpinionPage: asyncComponent({
    resolve: () => import("../pages/opinionPage")
  }),
  InfoHeaderUi: asyncComponent({
    resolve: () => import("../ui/infoHeaderUi")
  }),
  OthersPage: asyncComponent({
    resolve: () => import("../pages/othersPage")
  }),
  InfoSearch: asyncComponent({
    resolve: () => import("../pages/infoSearch/infoSearch.js")
  }),
  governmind : asyncComponent({
    resolve: () => import("../../../components/mind/taskview")
  }),
}
@inject('infoStore','mainStore')
@withRouter
@observer
/*
 * @info: 详情组件
 * @Author: lusx
 * @Date: 2019-12-01 11:13:16
 * @Last modified by:   lusx
 * @Last modified time: 21-03-2019 04:54:34
 */
export default class DetailsLayout extends Component {
  componentWillMount(){
    const {infoStore:{getPathname},location:{pathname}} = this.props;
    getPathname(GovernConstant.getUrlChar(pathname))
  }
  componentDidMount() {
    const {infoStore:{initInfoPage},location} = this.props;
    const id = new URLSearchParams(location.search).get('id');
    initInfoPage({"id":id});
  }
  componentWillReceiveProps(nextProps){
    // console.log("willRec", nextProps.location.pathname,this.props.location.pathname)
    let iscontent = (nextProps.location.pathname=='/quickbar/overtime/info/content'&&this.props.location.pathname!='/quickbar/overtime/info/content');
    if((iscontent)||(nextProps.location.search !== this.props.location.search)){//19.1.23解决任务阶段路由任务内容，再点击任务内容，不刷新
      const {infoStore:{getPathname,initInfoPage},location} = nextProps;
      const {pathname} = location;
      getPathname(GovernConstant.getUrlChar(pathname));
      const id = new URLSearchParams(location.search).get('id');
      initInfoPage({"id":id})
    }
  }
  componentWillUnmount(){
    const {infoStore:{clearState}} = this.props;
    clearState()
  }
  render() {
    const {infoStore,match} = this.props;
    const {form,subtasksListStore,refreshing,isCommentRight,isRight} = infoStore;
    const setPath = (path)=>{//有两处用到，可以优化
      const index = path.lastIndexOf(':');
      const newPath = path.slice(0,index);
      return newPath;
    };
    return(
      <div className="g-detailsLayout" style={{height:'100%'}}>
      <coms.InfoHeaderUi />
    {  /*<PullToRefresh
        damping={60}
        ref={el => { this.ptr = el}}
        style={{
          height: this.state.height,
          overflow: 'auto',
        }}
        refreshing={refreshing}
        onRefresh={() => {
          this.setState({ refreshing: true });
          setTimeout(() => {
            this.setState({ refreshing: false });
          }, 50);
        }} component={coms.ContentPage}  component={coms.OpinionPage}  render={()=>{
          return <coms.OpinionPage isRight={isRight} isCommentRight={isCommentRight}/>
        }}
      > 19.1.21列表组件具有下拉刷新，暂觉不需 */ }
          <Switch>
            <Route key="content" path={`${setPath(match.path)}content`}  render={()=>{
              return <coms.ContentPage form={form} isRight={isRight} isCommentRight={isCommentRight} touchStart={this.touchStart} handleTouchEnd={this.handleTouchEnd}/>
            }}/>
            <Route key="level" path={`${setPath(match.path)}level`} exact render={()=>{
              return <coms.SubtasksPage subtasksListStore={subtasksListStore} isright={isRight} isCommentRight={isCommentRight} />
            }}/>
            <Route path={`${setPath(match.path)}opinion`}  render={()=>{
              return <coms.OpinionPage isright={isRight} iscommentright={isCommentRight} isopioion='isopioion'/>
            }}/>
            <Route path={`${setPath(match.path)}document`}  render={()=>{
              return <coms.OthersPage isright={isRight} iscommentright={isCommentRight} />
            }}/>
            <Route path={`${setPath(match.path)}infoSearch`} render={()=>{
              return <coms.InfoSearch isright={isRight} iscommentright={isCommentRight} />
            }}/>
            <Route path={`${setPath(match.path)}mind`} render={()=>{
              return <coms.governmind isright={isRight} iscommentright={isCommentRight} />
            }}/>
        </Switch>
        {/*</PullToRefresh>*/}
      </div>
    );
  }
  touchStart = (e)=>{
    this.pressTime  = setTimeout(()=>{
      const {location} = this.props;
      const id = new URLSearchParams(location.search).get('id');
      const {form} = this.props.infoStore;
      const mobileNamespan = form.formData.name.value || '';
      this.showActionSheet(mobileNamespan,id,e)
    }, '1000');
  }
  handleTouchEnd = ()=>{
    clearTimeout(this.pressTime);
  }
  showActionSheet = (mobileNamespan, id, e) => {
    e.persist();
    //e.preventDefault();
    //e.stopPropagation();
    
    const {
      mainStore :{actionSheetStore: { getActionBtn }},
      history: { push },
      match: { url }
    } = this.props;
    const path = url.slice(0,url.indexOf('/info'));
    getActionBtn({
      message: mobileNamespan,
      historyPush: push,
      path: path,
      id: id
    });
  }
}
